import React, { Component, Fragment } from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import { Spin, Table, Card, Button,message, Switch, Form, Icon, Popover } from 'antd';
import styles from './index.less';
import router from 'umi/router';


class Notices extends Component {
  state = {
    loading: true,
    title:'',
    content:null,
    WxaTemplateId:''
  }
  componentWillMount() {
    window.Isoption = false;
    const { dispatch } = this.props;
    dispatch({
      type: `notice/GetMemberNotices`,
      callback: {
          success: (data) => {
              if (data.Code === 0) {
                this.setState({loading:false})
              }
          },
          error: (data) => {
            message.error(data.Msg);
          }
      }
    });
  }
  componentDidMount() {
    window.Isoption = true;
  }
  onChangeSms= (checked,id) => {
    this.setMsg(id,checked);
  }

  onChangeXcx= (checked,id) => {
    this.setXcx(id,checked);
  }

  setXcx= (MessageId,XcxPreview)=>{
    const { dispatch } = this.props;
    dispatch({
      type: `notice/SetXcxMessage`,
      payload: {
        MessageId: MessageId,
        XcxPreview:XcxPreview
      },
      callback: {
          success: (data) => {
            if (data.Code === 0) {
              message.success('设置成功');
            }
          },
          error: (data) => {
            message.error(data.Msg);
          }
      }
    });
  }

  setMsg= (MessageId,SmsPreview)=>{
    const { dispatch } = this.props;
    dispatch({
      type: `notice/SetSmsMessage`,
      payload: {
        MessageId: MessageId,
        SmsPreview:SmsPreview
      },
      callback: {
          success: (data) => {
            if (data.Code === 0) {
              message.success('设置成功');
            }
          },
          error: (data) => {
            message.error(data.Msg);
          }
      }
    });
  }

  handleVisibleChange= (row,msg)=>{
    let title=row.Title,content=null;
    if(msg){
      let arr=row.SmsTemplateContent.split(/\\n/)
      content=(<div>{
        arr.map((item,i)=>{
          return <p key={i}>{item}</p>
        })
      }</div>)
    }else{
      let arr=row.WxaTemplateContent.split(/\\n/)
      content=(<div>{
        arr.map((item,i)=>{
          return <p key={i}>{item}</p>
        })
      }<p>{row.WxaTemplateId}</p></div>)
    }
    this.setState({title:title,content:content})
  }

  clickRecharge=()=> {
    message.info("暂未开放", 2)
  }

  render() {
    const { loading,title,content } = this.state;
    const { loadingTable, noticeList } = this.props;
    //console.log(noticeList)
    const columns=[{
      title: '消息标题',
      dataIndex: 'Title',
      key: 'Title',
      width:'20%'
    },{
      title: '推送规则',
      dataIndex: 'RuleInfo',
      key: 'RuleInfo',
    },{
      title: '小程序模板消息',
      key: 'XcxPreview',
      width:'25%',
      render: (text, row, index) => {
        return (<Form layout='inline'><Form.Item>
          <Switch size="small" defaultChecked={row.XcxPreview} onChange={(checked)=>{this.onChangeXcx(checked,row.Id)}} />
          <Popover
            content={content}
            title={title}
            trigger="click"
            onVisibleChange={()=>{this.handleVisibleChange(row)}}
          >
            <span style={{color:"#2E74FF",marginLeft:"8px",cursor:"pointer"}}>预览</span>
          </Popover>
        </Form.Item></Form>)
      },
    },{
      title: '短信通知',
      key: 'SmsPreview',
      render: (text, row, index) => {
        if(index===0){
          return (<Form layout='inline'><Form.Item>
          <Switch size="small" defaultChecked={row.SmsPreview} onChange={(checked)=>{this.onChangeSms(checked,row.Id)}} />
          <Popover
            content={content}
            title={title}
            trigger="click"
            onVisibleChange={()=>{this.handleVisibleChange(row,"msg")}}
          >
            <span style={{color:"#2E74FF",marginLeft:"8px",cursor:"pointer"}}>预览</span>
          </Popover>
        </Form.Item></Form>)
        }
        return '-'
      }
    }];

    const dataSource=noticeList.Data;

    return (
      <Spin spinning={loading}>
        <Card  bordered={false} className={styles.Notices}>
          <div className={styles.Tips}>
            <div className={styles.TipsLeft}><Icon style={{marginRight:"8px",color:"#FF9800"}} type="info-circle" theme="filled" />您店铺当前剩余短信条数为{noticeList.RemainTotal}条啦，赶快去充值吧</div>
            <div className={styles.TipsRight}>
                <a href="javascript:void(0)" onClick={this.clickRecharge}>立即充值</a>
            </div>
          </div>
          <Table loading={loadingTable} columns={columns} dataSource={dataSource} pagination={false}/>
        </Card>
      </Spin>
    );
  }
}
export default connect(({ global, loading, notice}) => ({
  loadingTable: loading.effects['notice/GetMemberNotices'],
  noticeList: notice.noticeList
}))(Notices);
